import React, {useState } from 'react';
import { useSpring, animated } from 'react-spring';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Logout from '@mui/icons-material/Logout';
import './Login.scss';



const isEmail = (email) => {
    return (String(email).includes("@"));
};

const isAdminEmail = (email) => {
    if (email === "success@root.net") {
        return true
    }
    return false
};


const isCorrectPassword = (password) => {
    return true
}

const isFirstLogin = (email) => {
    return false
}


function Login() {
    const [emailValue, setEmailValue] = useState("");
    const [passwordValue, setPasswordValue] = useState("");
    const [repeatPasswordValue, setRepeatPasswordValue] = useState("");
    const [stateEmail, setStateEmail] = useState("");
    const [statePassword, setStatePassword] = useState("");
    const [stateRepeatPasswordValue, setStateRepeatPasswordValue] = useState("");
    const [showPasswordFill, setShowPasswordFill] = useState(false);


    const handleChangeEmail = e => {
        setEmailValue(String(e.target.value).trim());
    };

    const handleChangePassword= e => {
        setPasswordValue(e.target.value);
    };

    const handleChangeRepeatPassword= e => {
        setRepeatPasswordValue(e.target.value);
    };

    const tryFirstLogin = () => {
        if (passwordValue.length < 8) {
            setStatePassword("err_to_short")
        } else if (!(/\d/.test(passwordValue) && /[a-zA-Zа-яА-Я]/.test(passwordValue))) {
            setStatePassword("err_to_easy")
        } else if (!(repeatPasswordValue === passwordValue)) {
            setStateRepeatPasswordValue("err_not_match")
        } else {
            setStatePassword("ok")
            setStateRepeatPasswordValue("ok")
        }
    }

    const tryLogin = () => {
        if (!isEmail(emailValue)) {
            setStateEmail("err_not_email")
        } else {
            setStateEmail("ok")
        }
        if (!isCorrectPassword(passwordValue)) {
            setStatePassword("err_not_correct")
        } else {
            setStatePassword("ok")
            window.location = "/dashboard"
        }
    }

    const setEmail = () => {
        if (!isEmail(emailValue)) {
            setStateEmail("err_not_email")
        } else if (!isAdminEmail(emailValue)) {
            setStateEmail("err_not_admin")
        } else {
            setStateEmail("ok");
            setShowPasswordFill(!showPasswordFill);
        }
    }

    const slideAnimation = useSpring({
        transform: showPasswordFill ? 'translateX(0%)' : 'translateX(100%)',
    });

    var inputEmail;    
    if (stateEmail === "err_not_email") {
        inputEmail = <TextField
            error
            id="outlined-error-helper-text"
            label="Ошибка"
            helperText="введите почту"
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={emailValue} 
            onChange={handleChangeEmail}
        />;
    } else if (stateEmail === "err_not_admin") {
        inputEmail = <TextField
            error
            id="outlined-error-helper-text"
            label="Ошибка"
            helperText="вы не администратор"
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={emailValue} 
            onChange={handleChangeEmail}
        />;
    } else {
        inputEmail = <TextField id="outlined-basic" 
            label="Эл. почта"
            variant="outlined" 
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={emailValue} 
            onChange={handleChangeEmail}
        />;
    }

    var inputPassowrd
    if (statePassword === "err_to_short") {
        inputPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="слишком короткий (< 8)"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else if (statePassword === "err_to_easy") {
        inputPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="слишком простой (используйте цифры и букы)"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else if (statePassword === "err_not_correct") {
        inputPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="неверный пароль"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else {
        inputPassowrd = <TextField
            id="outlined-password-input"
            label="Пароль"
            type="password"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    }
    var inputRepeatPassowrd
    if (stateRepeatPasswordValue === "err_not_match") {
        inputRepeatPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="пароли не совпадют"
            autoComplete="current-password"
            value={repeatPasswordValue} 
            onChange={handleChangeRepeatPassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else {
        inputRepeatPassowrd = <TextField
            id="outlined-password-input"
            label="Повторите пароль"
            type="password"
            autoComplete="current-password"
            value={repeatPasswordValue} 
            onChange={handleChangeRepeatPassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    }

    return (
        <div className='LoginPage'>
            <img src="full_logo.png" alt="full_logo" className='FullLogo'/>
            <div className='InputCard'>
                <h1 style={{marginBottom: "1cm"}}>Авторизация</h1>
                {inputEmail}
                <Button variant="contained"
                    endIcon={<Logout style={{fontSize: '37px'}}/>}  
                    style={{ fontSize: "20px" }}
                    className="LoginButton"
                    onClick={setEmail}>
                    Вперед
                </Button>
                <animated.div
                    style={{
                        ...slideAnimation,
                        position: 'fixed',
                        top: "0cm",
                        right: "-1cm",
                        width: '12cm',
                        height: '100%',
                        backgroundColor: 'transparent',
                        borderTopLeftRadius: "1cm",
                        borderBottomLeftRadius: "1cm",
                        zIndex: "5",
                    }}>
                    <div className='InputCard' style={{boxShadow: "3px 3px 20px 1px rgba(0,0,0,.8)"}}>
                        { isFirstLogin(emailValue) && (
                            <div style={{display: "flex", alignItems: "center", flexDirection: "column"}}>
                                <h1 style={{marginBottom: "1cm"}}>Придумайте пароль</h1>
                                <TextField
                                    disabled
                                    id="outlined-disabled"
                                    label="Эл. почта"
                                    value={emailValue}
                                    style={{marginBottom: "0.5cm", width: "8cm"}}
                                />
                                {inputPassowrd}
                                {inputRepeatPassowrd}
                                <Button variant="contained"
                                    endIcon={<Logout style={{fontSize: '37px'}}/>}  
                                    style={{ fontSize: "20px" }}
                                    className="LoginButton"
                                    onClick={tryFirstLogin}>
                                    Войти
                                </Button>
                            </div>
                        )} 
                        { !isFirstLogin(emailValue) && (
                            <div style={{display: "flex", alignItems: "center", flexDirection: "column"}}>
                                <h1 style={{marginBottom: "1cm"}}>Введите пароль</h1>
                                <TextField
                                    disabled
                                    id="outlined-disabled"
                                    label="Disabled"
                                    value={emailValue}
                                    style={{marginBottom: "0.5cm", width: "8cm"}}
                                />
                                {inputPassowrd}
                                <Button variant="contained"
                                    endIcon={<Logout style={{fontSize: '37px'}}/>}  
                                    style={{ fontSize: "20px" }}
                                    className="LoginButton"
                                    onClick={tryLogin}>
                                    Войти
                                </Button>
                            </div>
                        )} 
                    </div>
                </animated.div>
            </div>
        </div>
    )
}


export default Login;
